<template>
	<div class="inner-wrap">
		<div style="margin-bottom: 20px;float: right;">
			<el-button type="primary" @click="handleSub">批量处理</el-button>
			<el-button @click="handleReset">取消选择</el-button>
		</div>
		<el-table :data="tableData"  ref="multipleTable" style="width: 100%;height: 85%;" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55"> </el-table-column>
			<el-table-column prop="date" label="源待加水印文件名称"> </el-table-column>
			<el-table-column prop="name" label="加水印后文件名称" width="180"> </el-table-column>
			<el-table-column prop="name" label="水印字符" width="180"> </el-table-column>
			<el-table-column label="处理状态" width="180">
				<template #default="scope">
					<el-tag type="success">标签二</el-tag>
					<el-tag type="danger">标签五</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="处理时间" width="180"> </el-table-column>
			<el-table-column fixed="right" label="操作" width="160">
				<template #default="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small"
					>处理</el-button
					>
					<el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			v-if="total > 0"
			style="float: right;margin-top: 10px;"
			background layout="prev, pager, next"
			@current-change="handlePageChange"
			:total="total">
		</el-pagination>
	</div>
</template>

<script>
import { reactive, ref, getCurrentInstance } from "vue";
import {postData} from "@/http/request";

export default {
	name: "userlist",
	setup(){
		let tableData =  ref([
			{
				date: '2016-05-02',
				name: '王小虎',
				province: '上海',
				city: '普陀区',
				address: '上海市普陀区金沙江路 1518 弄',
				zip: 200333,
			},
			{
				date: '2016-05-04',
				name: '王小虎',
				province: '上海',
				city: '普陀区',
				address: '上海市普陀区金沙江路 1517 弄',
				zip: 200333,
			},
			{
				date: '2016-05-01',
				name: '王小虎',
				province: '上海',
				city: '普陀区',
				address: '上海市普陀区金沙江路 1519 弄',
				zip: 200333,
			},
			{
				date: '2016-05-03',
				name: '王小虎',
				province: '上海',
				city: '普陀区',
				address: '上海市普陀区金沙江路 1516 弄',
				zip: 200333,
			},
		])

		let total = ref(0)

		let multipleSelection = ref([])

		let {proxy} = getCurrentInstance()

		let handleClick = data => {
		}

		let handleDel = data => {
			proxy.$confirm('确认删除吗?', '', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!',
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		}

		let handleSub = () => {}

		let handleReset = () => {
			proxy.$refs.multipleTable.clearSelection()
		}

		let handleSelectionChange = rows => {
			multipleSelection.value = rows
		}

		let handlePageChange = page => {

		}

		return {
			tableData,
			total,
			multipleSelection,
			handleClick,
			handleDel,
			handleSub,
			handleReset,
			handleSelectionChange,
			handlePageChange
		}
	}
};
</script>

<style scoped>
.inner-wrap {
	width: 98% !important;
	height: auto;
	overflow: hidden;
	box-sizing: border-box;
}
</style>
